<script setup lang="ts" name="TwoStockTally">
import { onMounted, reactive, ref, watch } from "vue";
import SelectShip from "@/components/SelectInfo/SelectShip.vue";
import SelectBill from "@/components/SelectInfo/SelectBill.vue";
import moment from "moment";
import {
  GetShipBillRemarkList,
  GetStorageByTransportBillId,
  GetTransportBillDetail,
  GetTransportShipDetail,
  SubmitTwoStockTally
} from "@/api/tally";
import SelectKeeper from "@/components/SelectInfo/SelectKeeper.vue";
import { useBillInfo } from "@/store/bill-info";
import { useDictInfo } from "@/store/dict";
import TallyVariousForm from "@/components/TallyType/TallyVariousForm.vue";
import {
  type ConfigProviderThemeVars,
  showFailToast,
  showNotify,
  showSuccessToast
} from "vant";
import { useEditOstInfo } from "@/store/edit-ost-info";
import router from "@/router";
import TallyTransferForm from "@/components/TallyType/TallyTransferForm.vue";
import FloatHeader from "@/components/NavBar/FloatHeader.vue";
import { useToken } from "@/store/token";
import { setToJoinedStr } from "@/utils/set-to-joinedStr";

const dictStore = useDictInfo();
const timeSpaceList = ref([] as Array<any>);
const tallyTypeList = ref([] as Array<any>);

const record = ref({} as any);
const isEdit = ref(false);
const isReuse = ref(false);
onMounted(() => {
  timeSpaceList.value = dictStore.getDictByCode("time_space");
  tallyTypeList.value = dictStore.getDictByCode("tally_type");
  tallyTypeList.value = tallyTypeList.value.filter(
    i => i.remark.indexOf("two;") >= 0
  );

  const editBillInfoStore = useEditOstInfo();
  record.value = editBillInfoStore.editOstInfo;

  if (record.value?.id) {
    isEdit.value = true;
    isReuse.value = record.value.isReuse;
    transportShip.id = record.value.oriTransportShipId;
    transportShip.value = record.value.oriShipNameZh;
    getTransportShipDetail(transportShip.id);

    transportBill.id = record.value.oriTransportBillId;
    transportBill.value = record.value.oriBillNo;
    transportBill.isCheckWhs = true;
    getTransportBillDetail(transportBill.id);
    getShipBillRemark(transportBill.id);

    tallyDateAndTimeSpace.tallyDate = record.value.tallyDate;
    tallyDateAndTimeSpace.timeSpace = record.value.timeSpace;
    tallyDateAndTimeSpace.defaultDate = moment(record.value.tallyDate).toDate();

    tallyType.value = record.value.tallyType;

    safeProduction.keeper = record.value.keeper;
    safeProduction.keeperName = record.value.keeperName;
    safeProduction.isCover = record.value.isCover;
    safeProduction.isBedding = record.value.isBedding;
    safeProduction.isSafeProduction = record.value.isSafeProduction;
    safeProduction.remark = record.value?.remark;
    safeProduction.shipBillRemark = record.value?.shipBillRemark;
  }
});

const themeVars: ConfigProviderThemeVars = {
  cellLabelFontSize: "13px",
  fieldInputTextColor: "#7f7e7e",
  numberKeyboardZIndex: 1000,
  cellBorderColor: "#cccccc",
  borderWidth: "1.5px",
  cellHorizontalPadding: "0px",
  cellVerticalPadding: "10px",
  radioDotSize: "5px",
  navBarTitleTextColor: "#ffffff",
  navBarIconColor: "#ffffff",
  fontBold: 0,
  popupBackground: "#f6f6f6"
};

const transportShip = reactive({
  id: "",
  value: "",
  showSelectShipPopup: false,
  showMoreShipInfo: [],
  showMore: false,
  detail: {} as any
});

function getTransportShipDetail(transportShipId: string) {
  GetTransportShipDetail({ transportShipId }).then((res: any) => {
    transportShip.detail = res.data;
  });
}

function beforeShowSelectShipPopup() {
  if (isEdit.value) {
    return;
  }
  transportShip.showSelectShipPopup = true;
}

const isSelectShipOpen = (value: boolean) => {
  transportShip.showSelectShipPopup = value;
};
const selectedShip = (value: any) => {
  transportBill.id = "";
  transportBill.value = "";
  transportBill.detail = "";
  transportShip.id = value.transportShipId;
  transportShip.value = value.shipNameZh;
  getTransportShipDetail(transportShip.id);
};

const transportBill = reactive({
  id: "",
  value: "",
  showSelectBillPopup: false,
  isCheckWhs: false,
  detail: {} as any
});
watch(
  () => transportBill.id,
  newValue => {
    transportBill.isCheckWhs = !newValue;
  },
  { immediate: true }
);

function beforeShowSelectBillPopup() {
  if (isEdit.value) {
    return;
  }
  if (!transportShip.id) {
    showFailToast("请先选择船");
    return;
  }
  transportBill.showSelectBillPopup = true;
}

const isSelectBillOpen = (value: boolean) => {
  transportBill.showSelectBillPopup = value;
};
const selectedBill = (value: any) => {
  transportBill.id = value.transportBillId;
  transportBill.value = value.billNo;

  getTransportBillDetail(transportBill.id);
  getShipBillRemark(transportBill.id);
};

function getTransportBillDetail(transportBillId: string) {
  GetTransportBillDetail({ transportBillId }).then((res: any) => {
    transportBill.detail = res.data;
    GetStorageByTransportBillId({ transportBillId }).then((store: any) => {
      transportBill.detail.storagePiece = store.data.piece;
      transportBill.detail.storageTon = store.data.ton;
      const billInfoStore = useBillInfo();
      billInfoStore.setBillInfo(transportBill.detail);
    });
  });
}

function getShipBillRemark(transportBillId: string) {
  GetShipBillRemarkList({
    transportBillId
  }).then((res: any) => {
    safeProduction.shipBillRemarkList = [];
    safeProduction.shipBillRemarkList = res.data;
  });
}

const tallyDateAndTimeSpace = reactive({
  showCalendar: false,
  defaultDate: new Date(),
  minDate: new Date(new Date().setDate(new Date().getDate() - 180)),
  maxDate: new Date(new Date().setDate(new Date().getDate() + 30)),
  tallyDate: moment(new Date()).format("YYYY-MM-DD"),
  timeSpace:
    new Date().getHours() >= 8 && new Date().getHours() <= 19 ? "DAY" : "NIGHT"
});

function onCalendarConfirm(dates: any) {
  tallyDateAndTimeSpace.tallyDate = moment(dates).format("YYYY-MM-DD");
  tallyDateAndTimeSpace.showCalendar = false;
}

const tallyType = ref("");

const tallyTypeForm = ref({} as any);

const safeProduction = reactive({
  keeper: "",
  keeperName: "",
  showSelectKeeperPopup: false,
  isSafeProduction: "",
  isCover: "",
  isBedding: "",
  remark: "",
  shipBillRemarkList: [] as Array<any>,
  shipBillRemark: "",
  showMoreChangeShift: [] as Array<any>,
  showMore: false
});
const isSelectKeeperOpen = (value: boolean) => {
  safeProduction.showSelectKeeperPopup = value;
};
const selectedKeeper = (value: any) => {
  safeProduction.keeper = value.accountId;
  safeProduction.keeperName = value.realName;
};

const tallyTypeFormRef = ref();

const tallyTypeFormValue = (value: any) => {
  tallyTypeForm.value = value;
};

const isContinue = ref(false);
const isLoading = ref(false);
const onSubmit = (value: any) => {
  tallyTypeFormRef.value.validate;
  const postData = {
    id: record.value?.id,
    oriTransportShipId: transportShip.id,
    oriTransportBillId: transportBill.id,
    toTShipBillId: "",
    tallyDate: tallyDateAndTimeSpace.tallyDate,
    timeSpace: tallyDateAndTimeSpace.timeSpace,
    keeper: safeProduction.keeper,
    keeperName: safeProduction.keeperName,
    isSafeProduction: safeProduction.isSafeProduction,
    isCover: safeProduction.isCover,
    isBedding: safeProduction.isBedding,
    remark: safeProduction.remark,
    shipBillRemark: safeProduction.shipBillRemark,
    tallyType: tallyType.value,
    ...tallyTypeForm.value
  };

  if (isReuse.value) {
    postData.id = "";
  }

  const token = useToken();
  postData.areaId = token.areaId || localStorage.getItem("areaId");

  if (postData.workActivity) {
    postData.workActivity =
      postData.workActivity.length > 0 ? postData.workActivity.join(",") : "";
  }

  if (postData.tallyType === "VARIOUS") {
    postData.toTransportShipId = postData.oriTransportShipId;
    postData.toTransportBillId = postData.oriTransportBillId;
  }

  if (postData.arrangeId && postData.machineTree.length > 0) {
    postData.machineTree.forEach((mk:any) => {
      mk.machineList.forEach((machine:any) => {
        const machineItem = {
          arrangeId: postData.arrangeId,
          shipLand: postData.shipLand,
          tallyType: tallyType.value,
          machineId: machine.machineId,
          machineName: machine.machineName,
          machineKind: mk.machineKind,
          machineKindName: mk.machineKindName,
          teamId: machine.teamId,
          teamName: machine.teamName,
          fullMachineName: machine.fullMachineName,
          isSelected: machine.isSelected ? "Y" : "N",
          isBulk: "N"
        };
        postData.machineList.push(machineItem);
      });
    });
    let teamIdSet = new Set<string>();
    let teamNameSet = new Set<string>();
    let machineKindSet = new Set<string>();
    let machineIdSet = new Set<string>();

    postData.machineList.forEach((item: any) => {
      if (item.isSelected === "Y") {
        teamIdSet.add(item.teamId);
        teamNameSet.add(item.teamName);
        machineKindSet.add(item.machineKind);
        machineIdSet.add(item.machineId);
      }
    });

    let teamMachineMap = new Map();
    for (let teamName of teamNameSet) {
      teamMachineMap.set(teamName as string, []);
    }

    postData.machineList.forEach((item: any) => {
      if (item.isSelected === "Y") {
        teamMachineMap.get(item.teamName).push( item.machineKindName + item.machineName);
      }
    });

    let machineInfoList = [] as any;


    for (let key of teamMachineMap.keys()) {
      console.log(key);
      const name = key + "(" + teamMachineMap.get(key).join(",") + ")";
      machineInfoList.push(name);
    }

    postData.machineInfo = machineInfoList.join(",");
    postData.machineIds = setToJoinedStr(machineIdSet);
    postData.machineKinds = setToJoinedStr(machineKindSet);
    postData.machineTeamIds = setToJoinedStr(teamIdSet);

  }
  SubmitTwoStockTally(postData).then((res: any) => {
    if (res.success) {
      if (!isContinue.value) {
        showSuccessToast("提交成功");
        setTimeout(() => {
          router.back();
          const editInfo = useEditOstInfo();
          editInfo.removeEditOstInfo();
        }, 500);
        return;
      }
      record.value.id = "";
      selectedBill({
        transportBillId: transportBill.id,
        billNo: transportBill.value
      });
      showSuccessToast("提交成功");
    } else {
      showFailToast("提交失败");
    }
    isLoading.value = false;
  });
};

const onFailed = (value: any) => {
  console.log(value);
  showFailToast("请检查表单");
  tallyTypeFormRef.value.validate;
};

function goBack(): void {
  const editInfo = useEditOstInfo();
  const billInfo = useBillInfo();
  editInfo.removeEditOstInfo();
  billInfo.removeBillInfo();
  router.back();
}
</script>

<template>
  <div
    class="container flex flex-col bg-gray-100 bg-no-repeat bg-contain bg-scroll back-image"
    ref="self"
  >
    <van-config-provider :theme-vars="themeVars">
      <FloatHeader :title="'杂作业/转配'"></FloatHeader>
      <van-nav-bar
        class="mt-[60px] text-white"
        style="background: transparent"
        :border="false"
        title="杂作业/转配"
        @click-left="goBack"
        left-arrow
      />
      <div class="flex flex-col h-auto w-[95%] mx-auto">
        <div class="flex-col flex w-full h-auto mb-[20px]">
          <div class="flex justify-center">
            <div class="w-full flex flex-col">
              <van-form @submit="onSubmit" @failed="onFailed">
                <!-- 船名舱单  -->
                <div
                  id="shipBillInfo"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] mt-1 rounded-lg"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">
                      船舶舱单信息
                    </div>
                    <div class="flex h w items-center">
                      <a
                        class="text-xs"
                        style="color: #4486fa"
                        @click="
                          transportShip.showMore = !transportShip.showMore
                        "
                      >
                        查看船名单号详情
                        <van-icon name="arrow" />
                      </a>
                    </div>
                  </div>
                  <van-cell-group :border="false">
                    <!-- 选择船名 -->
                    <van-field
                      :border="true"
                      :disabled="isEdit"
                      is-link
                      readonly
                      v-model="transportShip.value"
                      name="shipName"
                      placeholder="请选择船名"
                      @click="beforeShowSelectShipPopup"
                      :rules="[{ required: true, message: '请选择船名' }]"
                    >
                      <template #label>
                        船名<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="transportShip.showSelectShipPopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectShip
                        @isOpen="isSelectShipOpen"
                        @selectedShip="selectedShip"
                      ></SelectShip>
                    </van-popup>
                    <!-- 选择单号 -->
                    <van-field
                      :border="false"
                      :disabled="isEdit"
                      is-link
                      readonly
                      v-model="transportBill.value"
                      name="billNo"
                      placeholder="请选择单号"
                      @click="beforeShowSelectBillPopup"
                      :rules="[{ required: true, message: '请选择单号' }]"
                    >
                      <template #label>
                        单号<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="transportBill.showSelectBillPopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectBill
                        :shipId="transportShip.id"
                        @isOpen="isSelectBillOpen"
                        @selectedBill="selectedBill"
                      ></SelectBill>
                    </van-popup>
                    <!-- 船单号信息 -->
                    <Transition name="fade">
                      <div
                        class="w-[95%] mx-auto h-auto mt-[5px]"
                        style="background: #f2f6ff"
                        v-if="transportShip.showMore"
                      >
                        <div class="flex flex-col w-full h-auto gap-2 p-[12px]">
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              船名
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportShip.detail?.shipNameZh }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              进口航次
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportShip.detail?.impVoyage }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              出口航次
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportShip.detail?.expVoyage }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              预报状态
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportShip.detail?.forecastStatusName }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              单号
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportBill.detail?.billNo }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              进出口
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportBill.detail?.ieName }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              货名
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportBill.detail?.cargoTypeName }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              计划/库存件数
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportBill.detail?.piece }} /
                              {{ transportBill.detail?.storagePiece }}
                            </div>
                          </div>
                          <div class="flex w-full">
                            <div class="w-1/3 flex text-sm text-gray-400">
                              计划/库存吨数
                            </div>
                            <div class="flex flex-1 text-sm ml-[10px]">
                              {{ transportBill.detail?.ton }} /
                              {{ transportBill.detail?.storageTon }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </Transition>
                  </van-cell-group>
                </div>
                <!-- 日期班次  -->
                <div
                  id="tallyDateShift"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">
                      日期班次/理货类型
                    </div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      is-link
                      readonly
                      v-model="tallyDateAndTimeSpace.tallyDate"
                      name="tallyDate"
                      placeholder="请选择工班日期"
                      @click="tallyDateAndTimeSpace.showCalendar = true"
                      :rules="[{ required: true, message: '请选择工班日期' }]"
                    >
                      <template #label>
                        日期<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-calendar
                      :min-date="tallyDateAndTimeSpace.minDate"
                      :max-date="tallyDateAndTimeSpace.maxDate"
                      :default-date="tallyDateAndTimeSpace.defaultDate"
                      duration="0"
                      v-model:show="tallyDateAndTimeSpace.showCalendar"
                      :show-confirm="false"
                      @confirm="onCalendarConfirm"
                    />

                    <van-field
                      name="timeSpace"
                      :rules="[{ required: true, message: '请选择班次' }]"
                    >
                      <template #label>
                        班次<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="tallyDateAndTimeSpace.timeSpace"
                          direction="horizontal"
                        >
                          <van-radio
                            icon-size="18px"
                            :key="item?.dictKey"
                            v-for="item in timeSpaceList"
                            :name="item?.dictKey"
                          >{{ item?.dictValue }}
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      name="tallyType"
                      :border="false"
                      label="理货类型"
                      :rules="[{ required: true, message: '请选择理货类型' }]"
                    >
                      <template #label>
                        理货类型<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          :disabled="isEdit"
                          v-model="tallyType"
                          direction="horizontal"
                        >
                          <van-radio
                            :key="item?.dictKey"
                            v-for="item in tallyTypeList"
                            :name="item?.dictKey"
                            icon-size="18px"
                          >{{ item?.dictValue }}
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                  </van-cell-group>
                </div>

                <TallyVariousForm
                  ref="tallyTypeFormRef"
                  v-if="
                    tallyType === 'VARIOUS' &&
                    transportBill.detail.transportBillId
                  "
                  :shipId="transportShip.id"
                  :timeSpace="tallyDateAndTimeSpace.timeSpace"
                  :tallyDate="tallyDateAndTimeSpace.tallyDate"
                  @result="tallyTypeFormValue"
                ></TallyVariousForm>
                <TallyTransferForm
                  ref="tallyTypeFormRef"
                  v-if="
                    tallyType === 'TRANSFER' &&
                    transportBill.detail.transportBillId
                  "
                  @result="tallyTypeFormValue"
                ></TallyTransferForm>

                <!-- 文明生产  -->
                <div
                  id="safeProduction"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">
                      安全生产相关
                    </div>
                    <div class="flex h w items-center">
                      <a
                        class="text-xs"
                        style="color: #4486fa"
                        @click="
                          safeProduction.showMore = !safeProduction.showMore
                        "
                      >
                        查看交班记录
                        <van-icon name="arrow" />
                      </a>
                    </div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      is-link
                      readonly
                      v-model="safeProduction.keeperName"
                      name="保管员"
                      label="保管员"
                      @click="safeProduction.showSelectKeeperPopup = true"
                    />
                    <van-popup
                      v-model:show="safeProduction.showSelectKeeperPopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectKeeper
                        @isOpen="isSelectKeeperOpen"
                        @selectedKeeper="selectedKeeper"
                      >
                      </SelectKeeper>
                    </van-popup>
                    <van-field
                      name="isSafeProduction"
                      :rules="[{ required: true, message: '请选择类型' }]"
                    >
                      <template #label>
                        安全生产<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isSafeProduction"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      name="isCover"
                      :rules="[{ required: true, message: '请选择苫盖' }]"
                    >
                      <template #label>
                        苫盖<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isCover"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                          <van-radio name="OT" icon-size="18px"
                          >不需要
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      name="isBedding"
                      :rules="[{ required: true, message: '请选择铺垫' }]"
                    >
                      <template #label>
                        铺垫<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isBedding"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                          <van-radio name="OT" icon-size="18px"
                          >不需要
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      :border="false"
                      v-model="safeProduction.remark"
                      autosize
                      rows="1"
                      label="备注"
                      placeholder="此处输入内容"
                      type="textarea"
                    />
                    <Transition name="fade">
                      <div v-if="safeProduction.showMore">
                        <div
                          class="inline-block h-[1px] w-[355px] ml-[-15px] bg-slate-200"
                        ></div>
                        <div class="text-center" v-if="!transportBill.id">
                          <van-icon name="info-o" />
                          请选择舱单
                        </div>
                        <van-empty
                          image-size="100"
                          description="没有历史交班记录"
                          v-if="
                            safeProduction.shipBillRemarkList.length === 0 &&
                            transportBill.id
                          "
                        />
                        <div
                          :key="item?.id"
                          v-for="item in safeProduction.shipBillRemarkList"
                          style="background: #f3f8fe"
                          class="w-full h-auto text-sm rounded-lg border-white border-1 m-auto flex flex-col gap-1.5 pl-[10px] pr-[10px] pt-[5px] pb-[5px] my-[8px]"
                        >
                          <div class="flex w-full">
                            {{ item?.createTime }} | {{ item?.createUserName }}
                          </div>
                          <div class="flex w-full">
                            {{ item?.remark }}
                          </div>
                        </div>
                        <van-cell-group class="mt-5" :border="false">
                          <van-field
                            :border="false"
                            v-model="safeProduction.shipBillRemark"
                            rows="1"
                            autosize
                            label="新交班"
                            type="textarea"
                            placeholder="请输入交班记录"
                          />
                        </van-cell-group>
                      </div>
                    </Transition>
                  </van-cell-group>
                </div>
                <!-- 返回顶部  -->
                <van-back-top right="5vw" bottom="15vh" />
                <!-- 按钮组  -->
                <div class="m-[16px]">
                  <div class="flex w-full gap-2" v-if="!isLoading">
                    <van-button
                      class="flex flex-1"
                      block
                      color="#e6edff"
                      style="color: #4e6eb3"
                      native-type="submit"
                      @click="isContinue = false"
                    >
                      保存并提交
                    </van-button>
                    <van-button
                      class="flex flex-1"
                      block
                      color="#175eff"
                      native-type="submit"
                      @click="isContinue = true"
                    >
                      保存并继续
                    </van-button>
                  </div>
                  <div class="flex w-full gap-2" v-if="isLoading">
                    <van-button
                      class="flex flex-1"
                      block
                      disabled
                      loading
                      color="#e6edff"
                      style="color: #4e6eb3"
                      native-type="submit"
                      @click="isContinue = false"
                    >
                      保存并提交
                    </van-button>
                    <van-button
                      class="flex flex-1"
                      block
                      disabled
                      loading
                      color="#175eff"
                      native-type="submit"
                      @click="isContinue = true"
                    >
                      保存并继续
                    </van-button>
                  </div>
                </div>
              </van-form>
            </div>
          </div>
        </div>
      </div>
    </van-config-provider>
  </div>
</template>
<style scoped>
.header {
  background: linear-gradient(144deg, rgba(64, 169, 255, 1) 6%, #f7f8fa 6%);
}

.back-image {
  background-image: url("../../assets/back.png");
}
</style>
